<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于bootsnav的超酷3d导航菜单|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/font-awesome/5.1.0/css/all.css" rel="stylesheet">
	<link rel="stylesheet" href="css/bootsnav.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<!--演示页面样式，使用时可以不引用-->
	<style>
		nav.navbar.bootsnav {
			font-family: 'Roboto', sans-serif;
			margin-bottom: 150px;
			border: none;
		}

		nav.navbar.bootsnav .navbar-collapse {
			padding: 0;
		}

		nav.navbar.bootsnav ul.nav>li>a {
			color: #fff;
			background-color: #333;
			font-size: 16px;
			font-weight: 700;
			text-transform: uppercase;
			padding: 10px 15px 10px;
			margin: 0;
			border: none;
			border-bottom: 3px solid powderblue;
			overflow: hidden;
			position: relative;
			z-index: 1;
			transition: all 0.1s ease-out;
		}

		nav.navbar.bootsnav ul.nav>li.dropdown>a {
			padding: 10px 25px 10px 10px;
		}

		nav.navbar.bootsnav ul.nav>li.active>a,
		nav.navbar.bootsnav ul.nav>li.active>a:hover,
		nav.navbar.bootsnav ul.nav>li>a:hover,
		nav.navbar.bootsnav ul.nav>li.on>a {
			color: #fff;
			background-color: powderblue;
			text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
		}

		nav.navbar.bootsnav ul.nav>li>a>span:before,
		nav.navbar.bootsnav ul.nav>li>a>span:after {
			content: '';
			background: rgba(0, 0, 0, 0.2);
			height: 50%;
			width: 50%;
			opacity: 1;
			position: absolute;
			left: -50%;
			top: -50%;
			z-index: -1;
			transition: all 0.2s ease;
		}

		nav.navbar.bootsnav ul.nav>li>a>span:after {
			left: 100%;
			top: 100%;
		}

		nav.navbar.bootsnav ul.nav>li.active>a>span:before,
		nav.navbar.bootsnav ul.nav>li.active>a:hover>span:before,
		nav.navbar.bootsnav ul.nav>li>a:hover>span:before,
		nav.navbar.bootsnav ul.nav>li.on>a>span:before {
			left: 0;
			top: 0;
		}

		nav.navbar.bootsnav ul.nav>li.active>a>span:after,
		nav.navbar.bootsnav ul.nav>li.active>a:hover>span:after,
		nav.navbar.bootsnav ul.nav>li>a:hover>span:after,
		nav.navbar.bootsnav ul.nav>li.on>a>span:after {
			left: 50%;
			top: 50%;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li a:hover,
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a:hover,
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a.dropdown-toggle:active,
		nav.navbar ul.nav li.dropdown.on ul.dropdown-menu li.dropdown.on>a {
			text-shadow: 0 0 5px #000;
		}

		nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:after {
			color: #fff;
			margin: 0 0 0 7px;
			position: absolute;
			top: 9px;
			right: 7px;
			transition: all 0.3s;
		}

		nav.navbar.bootsnav ul.nav>li.dropdown>ul {
			background-color: #333;
			opacity: 0;
			transform: perspective(600px) rotateX(-90deg);
			transform-origin: top center;
			transform-style: preserve-3d;
			visibility: hidden;
			transition: all 0.3s ease 0s;
		}

		nav.navbar.bootsnav ul.nav>li.dropdown.on>ul {
			opacity: 1 !important;
			visibility: visible !important;
			transform: perspective(600px) rotateX(0);
		}

		.dropdown-menu.multi-dropdown {
			position: absolute;
			left: -100% !important;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
			background-color: #333;
			border: none;
			top: 101%;
			z-index: 1;
			transition: all 0.3s ease;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a {
			color: #fff;
			font-weight: 500;
			border: none;
			position: relative;
			transition: all 0.3s;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a:after,
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .menu-col li a:after {
			content: '';
			background-color: powerblue;
			height: 100%;
			width: 5px;
			transform: scaleY(0);
			position: absolute;
			top: 0;
			left: 0;
			transition: all 0.3s ease;
		}

		nav.navbar ul.nav li.dropdown.on ul.dropdown-menu li.dropdown.on>a:after,
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a:hover:after,
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .menu-col li a:hover:after {
			transform: scaleY(1);
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content {
			background-color: #333;
			overflow: hidden;
			top: 86%;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li {
			font-size: 14px;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .menu-col li a {
			color: #fff;
			padding-left: 10px;
			position: relative;
		}

		nav.navbar.bootsnav ul.nav li.megamenu-fw>a:hover,
		nav.navbar.bootsnav ul.nav li.megamenu-fw>a:focus,
		nav.navbar.bootsnav ul.nav li.megamenu-fw.on>a {
			background-color: #e84393 !important;
		}

		nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .col-menu {
			padding: 0 15px;
		}

		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title {
			color: #fff;
			background-color: powderblue;
			font-size: 16px;
			font-weight: bold;
			padding: 5px 10px;
			border-radius: 5px 0 5px 5px;
		}

		@media only screen and (max-width:990px) {
			.dropdown-menu.multi-dropdown {
				left: 0 !important;
			}

			nav.navbar.bootsnav .navbar-toggle {
				color: #fff;
				background: powderblue !important;
				padding: 3px 8px;
				margin-top: 2px;
				border-radius: 0;
			}

			nav.navbar.bootsnav.navbar-mobile .navbar-collapse {
				background-color: #333;
			}

			nav.navbar.bootsnav ul.nav>li {
				margin: 0 auto 2px;
			}

			nav.navbar.bootsnav.navbar-mobile ul.nav>li>a {
				text-align: center;
				padding: 10px 15px;
				margin: 0;
				border: none;
			}

			nav.navbar.bootsnav ul.nav>li.dropdown>a {
				padding: 10px 10px 10px 28px;
			}

			nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:before {
				color: #fff;
			}

			nav.navbar.bootsnav ul.nav>li.dropdown>ul {
				left: -5px;
			}

			nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu {
				margin: 0 0 -1px 0 !important;
				z-index: 1;
			}

			nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li>a {
				color: #fff;
				padding-left: 10px;
				border: none;
				position: relative;
			}

			nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li.dropdown:after {
				content: '';
				background-color: powderblue;
				height: 50px;
				width: 5px;
				transform: scaleY(0);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				transition: all 0.3s ease;
			}

			nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li.dropdown:hover:after,
			nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li.dropdown.on:after {
				transform: scaleY(1);
			}

			nav.navbar.bootsnav .dropdown-menu {
				z-index: 0;
			}

			nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content {
				top: 0;
			}

			nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title {
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				border: none;
			}

			nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .content {
				border: none;
			}

			nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .col-menu.on .title {
				font-weight: 600;
			}

			nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .col-menu li a {
				color: #fff;
				background-color: #333;
				border: none;
				margin-bottom: 0;
			}
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-default navbar-mobile bootsnav">
		<div class="collapse navbar-collapse" id="navbar-menu">
			<ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
				<li class="active"><a href="#" data-hover="Home">首页 <span data-hover="Home"></span></a>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">护肤产品
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">洁面产品</a></li>
						<li><a href="#">爽肤水</a></li>
						<li><a href="#">精华</a></li>
						<li><a href="#">乳液</a></li>
						<li><a href="#">面霜</a></li>
						<li><a href="#">眼霜</a></li>
						<li><a href="#">肌底液</a></li>
						<li><a href="#">面膜</a></li>
						<li><a href="#">防晒</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">人群区分护肤
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">男士护肤专区</a></li>
						<li><a href="#">女士护肤专区</a></li>
						<li><a href="#">婴幼儿护肤专区</a></li>
						<li><a href="#">学生护肤专区</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">肤质选择
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">干性皮肤</a></li>
						<li><a href="#">中性皮肤</a></li>
						<li><a href="#">油性皮肤</a></li>
						<li><a href="#">混合性皮肤</a></li>
						<li><a href="#">敏感性皮肤</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">皮肤症状应对
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">去黑头</a></li>
						<li><a href="#">美白</a></li>
						<li><a href="#">防晒</a></li>
						<li><a href="#">祛痘</a></li>
						<li><a href="#">去痘印</a></li>
						<li><a href="#">去油</a></li>
						<li><a href="#">收缩毛孔</a></li>
						<li><a href="#">抗衰老</a></li>
						<li><a href="#">去角质</a></li>
						<li><a href="#">抗过敏</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">品牌专区
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">顶配品牌</a></li>
						<li><a href="#">小众品牌</a></li>
						<li><a href="#">平价品牌</a></li>
						<li><a href="#">日韩品牌</a></li>
						<li><a href="#">欧美品牌</a></li>
						<li><a href="#">国产品牌</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">护肤文章
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">护肤产品测评</a></li>
						<li><a href="#">护肤方法指导</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">护肤步骤
						<span data-hover="Shortcodes"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">洁面</a></li>
						<li><a href="#">补水</a></li>
						<li><a href="#">保湿</a></li>
						<li><a href="#">去角质</a></li>
						<li><a href="#">上精华</a></li>
						<li><a href="#">涂眼霜</a></li>
					</ul>
				</li>
				<li><a href="#" data-hover="Contact">用户问卷调查 <span data-hover="Contact"></span></a>
				</li>
			</ul>
		</div>
	</nav>


	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<!-- <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
	<script src="js/bootsnav.js">
	</script>
</body>

</html>